<template>
  <v-app>
    <!-- 顶部导航栏 -->
    <v-app-bar color="black" dense dark app>
      <!-- 退出登录按钮 -->
      <div class="text-center" style="margin-right: 20px;">
        <v-menu offset-y>
          <template v-slot:activator="{ on, attrs }">
            <v-btn color="primary" dark v-bind="attrs" v-on="on">
              login/quit
            </v-btn>
          </template>
          <v-list>
            <v-list-item>
              <v-btn color="secondary" dark>修改密码</v-btn>
            </v-list-item>
            <v-list-item>
              <v-btn color="warning" dark>退出登录</v-btn>
            </v-list-item>
          </v-list>
        </v-menu>
      </div>

      <!-- 大标题 -->
      <v-toolbar-title style="font-family: Verdana, Geneva, Tahoma, sans-serif;">
        纪念商城
      </v-toolbar-title>
      <v-spacer></v-spacer>

      <!-- 右边三个选项 -->
      <v-btn depressed style="margin-right: 10px; font-family:'Courier New', Courier, monospace" @click="jumpToPreaserve">
        预约服务
        <v-icon>mdi-access-point</v-icon>
      </v-btn>
      <v-btn depressed style="margin-right: 10px; font-family:'Courier New', Courier, monospace" @click="jumpToMemoryShop">
        记录商城
        <v-icon>mdi-store</v-icon>
      </v-btn>
      <v-btn depressed style="margin-right: 10px; font-family:'Courier New', Courier, monospace"  @click="jumpToLivingDocument">
        生命档案
        <v-icon>mdi-file-document</v-icon>
      </v-btn>
      <v-btn depressed style="margin-right: 10px; font-family: 'Courier New', Courier, monospace;" @click="jumpToPersonalCenter">
        个人中心
        <v-icon>mdi-home</v-icon>
      </v-btn>
    </v-app-bar>

    <!-- 主内容 -->
    <v-main>
      <v-row style="margin-top: 100px;">
        <!-- 商品卡片：典雅纪念骨灰盒 -->
        <v-card class="mx-auto" max-width="444" outlined elevation="12">
          <v-list-item three-line>
            <v-list-item-content>
              <v-list-item-title class="text-h5 mb-1">典雅纪念骨灰盒</v-list-item-title>
              <v-list-item-subtitle>精选实木材质手工雕刻</v-list-item-subtitle>
            </v-list-item-content>
            <v-list-item-avatar tile size="80" color="grey">
              <img src="https://cdn.vuetifyjs.com/images/john.jpg" alt="John" />
            </v-list-item-avatar>
          </v-list-item>
          <v-card-actions>
            <v-btn outlined rounded text @click="triggerForm">
              <v-icon color="black">mdi-store</v-icon>
              {{ showForm ? '购买' : '购买' }}
            </v-btn>
            <v-spacer></v-spacer>
            <v-icon color="orange">mdi-currency-usd</v-icon>
            <div style="color: orange;">1280</div>
          </v-card-actions>
        </v-card>

        <!-- 表单弹窗 -->
        <v-dialog v-model="showForm" max-width="500px">
          <v-card>
            <v-card-title class="headline grey lighten-2">填写表单</v-card-title>
            <v-card-text>
              <v-form ref="form" v-model="valid" lazy-validation>
                <v-text-field
                  v-model="name"
                  :counter="10"
                  label="姓名"
                  required
                ></v-text-field>
                <v-text-field v-model="email" label="邮箱" required></v-text-field>
              </v-form>
            </v-card-text>
            <v-divider></v-divider>
            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn color="error" text @click="resetForm">重置</v-btn>
              <v-btn color="success" text @click="submitForm">提交</v-btn>
              <v-btn color="primary" text @click="closeDialog">关闭</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>

        <!-- 商品卡片：定制纪念相册 -->
        <v-card class="mx-auto" max-width="444" outlined elevation="12">
          <v-list-item three-line>
            <v-list-item-content>
              <v-list-item-title class="text-h5 mb-1">定制纪念相册</v-list-item-title>
              <v-list-item-subtitle>定制打印多种尺寸可选</v-list-item-subtitle>
            </v-list-item-content>
            <v-list-item-avatar tile size="80" color="grey">
              <img src="https://cdn.vuetifyjs.com/images/john.jpg" alt="John" />
            </v-list-item-avatar>
          </v-list-item>
          <v-card-actions>
            <v-btn outlined rounded text>
              <v-icon color="black">mdi-store</v-icon>
              购买
            </v-btn>
            <v-spacer></v-spacer>
            <v-icon color="orange">mdi-currency-usd</v-icon>
            <div style="color: orange;">1280</div>
          </v-card-actions>
        </v-card>
      </v-row>

      <v-row style="margin-top: 100px; margin-bottom: 100px;">
        <!-- 商品卡片：宠物纪念玉石项链 -->
        <v-card class="mx-auto" max-width="444" outlined elevation="12">
          <v-list-item three-line>
            <v-list-item-content>
              <v-list-item-title class="text-h5 mb-1">宠物纪念玉石项链</v-list-item-title>
              <v-list-item-subtitle>925银制，可刻字定制</v-list-item-subtitle>
            </v-list-item-content>
            <v-list-item-avatar tile size="80" color="grey">
              <img src="https://cdn.vuetifyjs.com/images/john.jpg" alt="John" />
            </v-list-item-avatar>
          </v-list-item>
          <v-card-actions>
            <v-btn outlined rounded text>
              <v-icon color="black">mdi-store</v-icon>
              购买
            </v-btn>
            <v-spacer></v-spacer>
            <v-icon color="orange">mdi-currency-usd</v-icon>
            <div style="color: orange;">1280</div>
          </v-card-actions>
        </v-card>

        <!-- 商品卡片：宠物纪念石 -->
        <v-card class="mx-auto" max-width="444" outlined elevation="12">
          <v-list-item three-line>
            <v-list-item-content>
              <v-list-item-title class="text-h5 mb-1">宠物纪念石</v-list-item-title>
              <v-list-item-subtitle>天然材质，户外防水</v-list-item-subtitle>
            </v-list-item-content>
            <v-list-item-avatar tile size="80" color="grey">
              <img src="https://cdn.vuetifyjs.com/images/john.jpg" alt="John" />
            </v-list-item-avatar>
          </v-list-item>
          <v-card-actions>
            <v-btn outlined rounded text>
              <v-icon color="black">mdi-store</v-icon>
              购买
            </v-btn>
            <v-spacer></v-spacer>
            <v-icon color="orange">mdi-currency-usd</v-icon>
            <div style="color: orange;">1280</div>
          </v-card-actions>
        </v-card>
      </v-row>
    </v-main>

    <v-footer dark padless>
      <v-card flat tile class="indigo lighten-1 white--text text-center" width="100%">
        <v-card-text>
          <v-btn v-for="icon in icons" :key="icon" class="mx-4 white--text" icon>
            <v-icon size="24px">{{ icon }}</v-icon>
          </v-btn>
        </v-card-text>

        <v-card-text class="white--text pt-0">
          <v-container>
            <v-row>
              <v-col cols="12" md="4" class="text-left">
                关于我们：我们致力于给每个宠物温馨的归宿
              </v-col>
              <v-col cols="12" md="4">
                服务时间：周一到周五 9：00-21：00
              </v-col>
              <v-col cols="12" md="4" class="text-right">
                联系我们：服务热线 029-87659021
              </v-col>
            </v-row>
          </v-container>
        </v-card-text>

        <v-divider></v-divider>

        <v-card-text class="white--text">
          {{ new Date().getFullYear() }} — 宠物生命纪念馆 All Rights Reserved
        </v-card-text>
      </v-card>
    </v-footer>
    <!-- Loading Overlay -->
    <v-overlay :value="isLoading" color="black">
      <v-progress-circular indeterminate size="64" color="primary"></v-progress-circular>
    </v-overlay>
  </v-app>
</template>

<script>
export default {
  data() {
    return {
      showForm: false,
      valid: true,
      name: "",
      email: "",
      icons: ["mdi-facebook", "mdi-twitter", "mdi-linkedin", "mdi-instagram"],
      isLoading:false,
      loading:true,
    };
  },
  methods: {
    triggerForm() {
      this.showForm = !this.showForm;
    },
    resetForm() {
      this.$refs.form.reset();
    },
    submitForm() {
      if (this.$refs.form.validate()) {
        alert("表单已提交！");
      }
    },
    closeDialog() {
      this.showForm = false;
    },
    reserve() {
      this.loading = true;
      setTimeout(() => (this.loading = false), 2000);
    },
    jumpToPreaserve() {
      this.isLoading = true; 
      setTimeout(() => {
        this.$router.push('/preserve'); 
        this.isLoading = false; 
      }, 1000); 
    },
    jumpToMemoryShop(){
      this.isLoading=true;
      setTimeout(()=>{
        // this.$router.push('/memory');
        this.isLoading =false;
      },1000);
    },
    jumpToLivingDocument(){
      this.isLoading=true;
      setTimeout(()=>{
        this.$router.push('/memory');
        this.isLoading =false;
      },1000);
    },
    jumpToPersonalCenter(){
      this.isLoading=true;
      setTimeout(()=>{
        this.$router.push('/center');
        this.isLoading =false;
      },1000);
    },
    quitLogin(){
      this.isLoading=true;
      setTimeout(()=>{
        this.$router.push('/login');
        this.isLoading =false;
      },1000);
    },
  },
};
</script>

<style scoped>
/* 样式可以根据需要进一步调整 */
</style>